<template>
  <el-card shadow="never" class="portal-tableList-box">
    <div slot="header" class="portal-common-title">
      <span>{{ title }}</span>
    </div>
    <div class="portal-tableList-box-body">
      <template v-if="rankingList.length">
        <el-table :data="rankingList">
          <template v-for="(item, index) in headerList">
            <template v-if="index === 0">
              <el-table-column
                show-overflow-tooltip
                :label="item"
                :prop="item"
                :key="index"
              >
              </el-table-column>
            </template>
            <template v-else>
              <el-table-column
                show-overflow-tooltip
                :label="item"
                :prop="item"
                :key="index"
              >
              </el-table-column>
            </template>
          </template>
        </el-table>
      </template>
      <div class="portal-common-noData portal-common-noData-eChart" v-else>
        <img src="@/assets/images/portal-nodata.png" alt="" class="noData-img" />
        <p class="noData-txt">暂无数据</p>
      </div>
    </div>
  </el-card>
</template>
<script>
import { previewDataInterface } from "@/api/systemData/dataInterface";
export default {
  props: {
    title: { type: String, default: "" },
    cuKey: { type: String, default: "" },
    dataType: { type: String, default: "" },
    propsApi: { type: String, default: "" },
    option: { type: Object, default: () => {} },
  },
  data() {
    return {
      headerList: [],
      rankingList: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      if (this.dataType == "dynamic") {
        previewDataInterface(this.propsApi).then((res) => {
          this.rankingList = res.data;
          this.headerList = Object.keys(res.data[0]);
        });
      } else {
      }
    },
  },
};
</script>
